<template>
  <div>
    <el-card class="box-card bigCard">
      <div slot="header" class="clearfix">
        <el-button style="float: right" size="small" type="primary" @click="showDialogFn()">新增员工</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="用户名"
        />
        <el-table-column prop="image" label="头像" sortable="">
          <template v-slot="{row}">
            <img v-imgError="require('@/assets/avatar/guitar.gif')" :src="row.image" alt="" style="width: 30%">
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
        />
        <el-table-column
          label="操作"
        >
          <!-- 给template 添加 v-slot="{row}",获取每一行数据 -->
          <template v-slot="{row}">
            <el-button type="primary" size="small" @click="showRolesDialog(row.id)">设置角色</el-button>
            <el-button size="small" @click="showDialogFn(row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
          </template></el-table-column>
      </el-table>
      <!-- 分页器 -->
      <MyPagination :total="total" :page-size="pageControl._limit" @getStart="getStart" />
    </el-card>

    <!-- 显示角色 -->
    <roles-dialog ref="rolesDialog" :roles-dialog-visible.sync="rolesDialogVisible" :roles-list="rolesList" @refresh="loadEmployeeList(pageControl)" />
    <!-- 新建--和--编辑弹窗 -->
    <add-and-edit ref="addAndEditDialog" :dialog-visible.sync="dialogVisible" @refresh="loadEmployeeList(pageControl)" />
  </div>

</template>

<script>
import { getEmployeeList, delEmployeeById } from '@/api/employees'
import { getRolesList } from '@/api/roles'
import addAndEdit from './component/addAndEdit.vue'
import RolesDialog from './component/rolesDialog.vue'
export default {
  components: { addAndEdit, RolesDialog },
  data() {
    return {
      tableData: [],
      rolesList: [],
      pageControl: {
        _limit: 3,
        _start: 0
      },
      total: 0,
      dialogVisible: false,
      rolesDialogVisible: false
    }
  },
  async created() {
    // 加载用户--每页3条
    this.loadEmployeeList(this.pageControl)
    // 加载角色列表
    const res = await getRolesList()
    // 获取总共有多少条数据
    const total = await getEmployeeList()
    this.total = total.data.length
    this.rolesList = res.data
    // console.log('获取角色列表', this.rolesList)
  },
  methods: {
    // 加载员工列表
    async loadEmployeeList(data) {
      const res = await getEmployeeList(data)
      this.tableData = res.data
    },
    // 分页器组件给父组件的函数
    getStart(start) {
      this.pageControl._start = start
      this.loadEmployeeList(this.pageControl)
    },
    // 显示(新增/编辑)弹窗
    showDialogFn(id) {
      this.dialogVisible = true
      // id 存在就是编辑--undefined 就是新增
      if (id) {
        this.$nextTick(async() => {
          await this.$refs.addAndEditDialog.loadUserInfoById(id)
        })
      }
    },
    // 显示(设置角色)弹窗
    showRolesDialog(id) {
      this.rolesDialogVisible = true
      this.$nextTick(async() => {
        await this.$refs.rolesDialog.loadUserInfoById(id)
        this.$refs.rolesDialog.isChecked()
      })
    },
    // 删除员工
    async delFn(id) {
      this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delEmployeeById(id)
        this.loadEmployeeList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style>
  .el-card{
    margin: 30px 15px;
  }
  .el-table .cell{
    text-align: center;
  }
</style>

<style lang="scss" scoped>
.el-button--default{
  background-color: #388FD5;
}
</style>
